/**
 * @description  访问统计
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { SecondHeaderC, XYHorizontalChartsC } from '../../../comps';
import style from './index.less';

class LoginTimesTop5 extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    const { args } = this.props;
    this.getData(args);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { args, timeStamp, dispatch } = nextProps;
    if (JSON.stringify(args) !== JSON.stringify(this.props.args) || timeStamp !== this.props.timeStamp) {
      dispatch({
        type: 'visitStatisticsM/save',
        payload: { loginTimesTop5: { yAxis: [], series: undefined } },
      });
      this.getData(args);
    }
  }

  getData = (params) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'visitStatisticsM/getTopFiveLogins',
      payload: params,
    });
  };

  render() {
    const {
      visitStatisticsM: { loginTimesTop5 },
    } = this.props;
    const { yAxis, series } = loginTimesTop5;

    return (
      <div className={style.body_area}>
        <SecondHeaderC title='机构登录次数TOP5' />
        <div>
          <XYHorizontalChartsC
            series={series}
            yAxis={yAxis.map((x) => x.value)}
            title='机构'
            height={310}
            click={(e) => {
              const id = yAxis?.filter((x) => x.value == e.name)[0]?.id;
              this.props.dispatch({
                type: 'visitStatisticsM/save',
                payload: { organizationId: id, name: e.name },
              });
            }}
          />
        </div>
      </div>
    );
  }
}
export default connect(({ visitStatisticsM }) => ({
  visitStatisticsM,
}))(LoginTimesTop5);
